<script setup lang="ts">
import { seoConfig } from '~/config/seo'

useSeoMeta({
  title: seoConfig.products.notifySms.title,
  description: seoConfig.products.notifySms.description,
  keywords: seoConfig.products.notifySms.keywords
})

// 产品优势数据
const advantages = [
  {
    icon: 'lucide:zap',
    title: '极速到达',
    description: '毫秒级触达，3-5秒即可送达，确保重要信息及时传递'
  },
  {
    icon: 'lucide:shield-check',
    title: '三网合一',
    description: '覆盖移动、联通、电信三大运营商，到达率高达99%'
  },
  {
    icon: 'lucide:bar-chart',
    title: '实时监控',
    description: '提供详细的发送报告和数据统计，实时掌握发送状态'
  },
  {
    icon: 'lucide:lock',
    title: '安全可靠',
    description: '企业级安全保障，支持加密传输，保护用户隐私'
  },
  {
    icon: 'lucide:clock',
    title: '7x24小时',
    description: '全天候技术支持，确保业务稳定运行'
  },
  {
    icon: 'lucide:trending-down',
    title: '价格透明',
    description: '按量计费，无隐藏费用，提供多种套餐选择'
  }
]

// 行业应用场景数据
const scenarios = [
  {
    icon: 'lucide:shopping-cart',
    title: '电商行业',
    description: '订单确认、物流跟踪、发货提醒、签收通知、售后服务',
    color: 'from-blue-500 to-cyan-500'
  },
  {
    icon: 'lucide:building-2',
    title: '金融行业',
    description: '交易通知、账户变动、还款提醒、理财到期、安全验证',
    color: 'from-purple-500 to-pink-500'
  },
  {
    icon: 'lucide:heart-pulse',
    title: '医疗健康',
    description: '预约提醒、体检通知、取药提醒、健康咨询、报告查询',
    color: 'from-green-500 to-emerald-500'
  },
  {
    icon: 'lucide:graduation-cap',
    title: '教育培训',
    description: '课程提醒、考试通知、成绩查询、缴费通知、活动邀请',
    color: 'from-orange-500 to-red-500'
  },
  {
    icon: 'lucide:truck',
    title: '物流快递',
    description: '揽件通知、在途跟踪、派送提醒、签收确认、异常通知',
    color: 'from-indigo-500 to-blue-500'
  },
  {
    icon: 'lucide:hotel',
    title: '旅游酒店',
    description: '订单确认、入住提醒、退房通知、活动推荐、服务咨询',
    color: 'from-yellow-500 to-orange-500'
  }
]
</script>

<template>
  <div class="min-h-screen">
    <!-- 顶部横幅 -->
    <ProductHero
      title="通知短信"
      description="提供通知类短信服务，三网合一的高质量短信通道，适用服务通知、物流通知、订单通知、注册及消费信息确认等。"
    />

    <!-- 产品优势 -->
    <section class="py-10 md:py-15 bg-gray-50">
      <div class="mx-auto px-4 max-w-6xl">
        <div class="text-center mb-8 md:mb-10">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            产品优势
          </h2>
          <p class="text-lg text-gray-600">
            专业的短信服务，为您的业务保驾护航
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
          <div
            v-for="(advantage, index) in advantages"
            :key="index"
            class="bg-white rounded-2xl p-6 md:p-8 shadow-sm hover:shadow-lg transition-all group"
          >
            <div class="w-14 h-14 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
              <Icon :name="advantage.icon" class="w-7 h-7 text-white" />
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-3">
              {{ advantage.title }}
            </h3>
            <p class="text-gray-600 leading-relaxed">
              {{ advantage.description }}
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- 行业应用场景 -->
    <section class="py-10 md:py-15 bg-white">
      <div class="mx-auto px-4 max-w-6xl">
        <div class="text-center mb-8 md:mb-10">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            行业应用场景
          </h2>
          <p class="text-lg text-gray-600">
            广泛应用于各行各业，助力企业高效沟通
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
          <div
            v-for="(scenario, index) in scenarios"
            :key="index"
            class="group relative bg-white rounded-2xl p-6 md:p-8 border-2 border-gray-100 hover:border-transparent hover:shadow-xl transition-all overflow-hidden"
          >
            <!-- 悬停时的渐变背景 -->
            <div 
              class="absolute inset-0 bg-gradient-to-br opacity-0 group-hover:opacity-10 transition-opacity"
              :class="scenario.color"
            />
            
            <div class="relative">
              <div 
                class="w-14 h-14 rounded-xl flex items-center justify-center mb-6 bg-gradient-to-br"
                :class="scenario.color"
              >
                <Icon :name="scenario.icon" class="w-7 h-7 text-white" />
              </div>
              <h3 class="text-xl font-bold text-gray-900 mb-3">
                {{ scenario.title }}
              </h3>
              <p class="text-gray-600 leading-relaxed">
                {{ scenario.description }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA 部分 -->
    <CallToAction />
  </div>
</template>

